<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>用户回收站</span>
        <span class="headerSize">共 0 条</span>
      </div>
    </template>
    <el-row class="row-bg" justify="space-between">
      <el-col :span="4">
        <el-input
          v-model="input2"
          placeholder="来源标识/学生/家长/老师/手机号/卡号"
          class="height40"
          style="width: 400px"
        >
          <template #append>搜索</template>
        </el-input>
      </el-col>
      <el-col :span="5">
        <!--        <el-button type="primary" class="height40">批量分配</el-button>-->
        <!--        <el-button type="primary" class="height40">创建用户</el-button>-->
        <!--        <el-button type="primary" class="height40">导出execl</el-button>-->
      </el-col>
    </el-row>
    <el-form :inline="true" :model="formInline" class="margintop">
      <el-form-item>
        <el-select
          v-model="formInline.region"
          placeholder="高考年份"
          clearables
          class="height40"
        >
          <el-option label="Zone one" value="shanghai" />
          <el-option label="Zone two" value="beijing" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select
          v-model="formInline.region"
          placeholder="科目"
          clearables
          class="height40"
        >
          <el-option label="Zone one" value="shanghai" />
          <el-option label="Zone two" value="beijing" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select
          v-model="formInline.region"
          placeholder="省份"
          clearables
          class="height40"
        >
          <el-option label="Zone one" value="shanghai" />
          <el-option label="Zone two" value="beijing" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select
          v-model="formInline.region"
          placeholder="设备"
          clearables
          class="height40"
        >
          <el-option label="Zone one" value="shanghai" />
          <el-option label="Zone two" value="beijing" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select
          v-model="formInline.region"
          placeholder="用户类型"
          clearables
          class="height40"
        >
          <el-option label="Zone one" value="shanghai" />
          <el-option label="Zone two" value="beijing" />
        </el-select>
      </el-form-item>
      <el-form-item label="">
        <el-date-picker
          v-model="value1"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
        />
      </el-form-item>
      <el-form-item label="">
        <el-input style="margin-bottom: 10px; width: 150px" placeholder="" />
        <el-icon style="margin-bottom: 10px">
          <Minus />
        </el-icon>
        <el-input style="margin-bottom: 10px; width: 150px" placeholder="" />
      </el-form-item>
      <el-form-item>
        <el-button style="margin-bottom: 10px" type="primary">筛选</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      style="width: 100%"
      class="margintop"
      :header-cell-style="{ 'border-bottom': 'none' }"
      :header-row-style="{ height: '60px' }"
      :cell-style="{ height: '60px', 'border-bottom': 'none' }"
      stripe
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="phone" label="手机号" width="150">
        <template #default="scope">
          <el-button
            link
            type="primary"
            size="small"
            @click.prevent="lookUserChange(scope.$index)"
          >
            {{ scope.row.phone }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="学生姓名" />
      <el-table-column prop="yeaer" label="高考年份" />
      <el-table-column prop="type" label="科目" />
      <el-table-column prop="province" label="省份" />
      <el-table-column prop="result" label="成绩" width="200" />
      <el-table-column prop="teatcher" label="老师" />
      <el-table-column prop="report" label="报告" />
      <el-table-column prop="facility" label="设备" width="150" />
      <el-table-column prop="source" label="来源标识" />
      <el-table-column prop="userType" label="用户类型" />
      <el-table-column prop="time" label="注册时间" width="200" />
      <el-table-column fixed="right" label="操作" width="220" align="center">
        <template #default>
          <el-tooltip
            class="box-item"
            effect="dark"
            content="开通志愿卡"
            placement="top"
          >
            <el-image
              style="width: 20px; height: 20px"
              :src="icon0"
              @click="openCardChange(0)"
            />
          </el-tooltip>
          <el-tooltip
            class="box-item"
            effect="dark"
            content="开通升学卡"
            placement="top"
            style="margin: 0 10px"
          >
            <el-image
              style="width: 20px; height: 20px; margin: 0 5px"
              :src="icon1"
              @click="openCardChange(1)"
            />
          </el-tooltip>
          <el-tooltip
            class="box-item"
            effect="dark"
            content="重置"
            placement="top"
          >
            <el-icon size="20" style="cursor: pointer" @click="resetChange">
              <RefreshRight />
            </el-icon>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <pagination :total="10" :background="false"></pagination>
  </el-card>
  <resetInfo ref="reset"></resetInfo>
  <openCard ref="open"></openCard>
  <updateUser ref="update"></updateUser>
</template>
<script setup>
import { ref, reactive } from 'vue';
import Pagination from '@/components/Pagination/index.vue';
import resetInfo from './module/resetInfo.vue';
import openCard from './module/openCard.vue';
import updateUser from './module/upadateUser.vue';

import icon0 from '@/assets/icons/icon0.png';
import icon1 from '@/assets/icons/icon1.png';

const value1 = ref('');
const input2 = ref('');

const reset = ref();
const open = ref();
const update = ref();

const formInline = reactive({
  user: '',
  region: '',
  date: '',
});
const tableData = [];
function lookUserChange() {
  update.value.openChange();
}
function openCardChange(val) {
  open.value.openChange(val);
}
function resetChange() {
  reset.value.openChange();
}
</script>
<style lang="scss" scoped>
::v-deep(.el-form--inline .el-form-item) {
  margin-right: 7px;
}

::v-deep(.el-form-item--default) {
  margin-bottom: 4px;
}

.box-card {
  margin: 20px;

  .card-header {
    font-size: 20px;
    font-weight: 600;
    color: #1d2129;
    padding: 10px;
    .headerSize {
      color: #4e5969;
      font-size: 14px;
      margin-left: 12px;
      font-weight: 400;
      height: 20px;
      line-height: 21px;
    }
  }
}
</style>
